<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style>
           *{
               margin: 0;
               padding: 0;
               box-sizing: border-box;
           }
           .clearfix::after{
               content: '';
               display: block;
               height: 0;
               overflow: hidden;
               visibility: hidden;
               clear: both;
           }
           .clearfix{
               *zoom: 1;
           }
           .bg{
                background: aliceblue;
           }
           .gap{
               margin-top: 10px;
           }
           .container{
                display: flex;
                position: relative;
                height: 100%;
                padding: 100px 0 10px; 
                overflow: hidden;
           }
           .title {
               position: absolute;
               top: 10px;
               /* left: 10px; */
               padding:0 10px;
               width: 100%;
               height: 80px;
               text-align: center;
               
           }
           .title .sum{
            color: #0571DE;
            font-size: 32px;
           }
           .float{
               padding: 10px;
           }
           .left, .right{
               flex: 1;
               height: 100%;
           }
           .center{
               position: relative;
               flex: 2;
               height: 100%;
           }
       </style>
   </head>
   <body style="height: 100%; margin: 0">
        
    <div class="container clearfix">
        <div class="title bg">
            <div class="sum">总放款金额: 9874569821365 万元</div>
            <div class="added">新增放款：54698746万元</div>
        </div>
        <div class="left float">
            <div id="barChart" class="bg" style = 'width: 100%;height: 50%;'></div>
            <div id="pieChart" class="bg gap" style = 'width: 100%;height: 50%;'></div>
        </div>
        <div class="center float ">
            <p id = 'back' style = 'position: absolute; right: 20px; top: 30px; cursor: pointer; z-index: 99999;'>返回大区</p>
            <div id="map" class="bg" style="width: 100%; height: 70%;"></div>
            <div id="lineChart" class="bg gap" style = 'width: 100%;height: 30%;'></div>
        </div>
        <div class="right float ">
            <div id="overlayChart" class="bg" style = 'width: 100%;height: 50%;'></div>
            <div id="raddarChart" class="bg gap" style = 'width: 100%;height: 50%;'></div>
        </div>
    </div>
        <script>
            var color = [
            '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
            '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
            '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
            '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
        ]
        </script>

        <script type="text/javascript" src="./lib/echarts.min.js"></script>
        <script type="text/javascript" src="china.js"></script>
        <script type="text/javascript" src="henan.js"></script>
        <script type="text/javascript" src="./BarChart.js"></script>
        <script type="text/javascript" src="./LineChart.js"></script>
        <script type="text/javascript" src="./PieChart.js"></script>
        <script type="text/javascript" src="./Overlay.js"></script>
        <script type="text/javascript" src="./RaddarChart.js"></script>
        
        <script type="text/javascript">
        
        var geoCoordMap = {
            '华北地区':[115.1551, 42.2539],
            '华南地区':[ 111.2813, 23.6426],
            '东北地区':[ 128.1445, 45.5156],
            '华东地区':[119.4648, 29.2891],
            '华中地区':[112.8, 31.1572],
            '西南地区':[97.5, 30.1904],
            '西北地区':[91.5996, 39.6396],
        }
        var geoCoordMap2 = {
            '黑龙江':[128.1445, 46.5156],
            '吉林':[ 127.2227, 43.2305],
            '辽宁':[ 124.2676, 41.3086]
        }
    var max = 600, min = 20; // todo 
    var maxSize4Pin = 100, minSize4Pin = 20;
    var convertData = function (geoMap, data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
};
var dom = document.getElementById("map");
var myChart = echarts.init(dom);
var data = {
    quyu: {
        name: '',
        mapType: 'china',
        data: [
            {name: '西北地区',value: 440 },
            {name: '华南地区',value: 211 },
            {name: '东北地区',value: 311 },
            {name: '华东地区',value: 511 },
            {name: '华北地区',value: 211 },
            {name: '华中地区',value: 210 },
            {name: '西南地区',value: 151 }
        ]
    },
    sheng: {
        name: '',
        mapType: 'henan',
        data: [
            {name: '黑龙江',value: 180 },
            {name: '辽宁',value: 20},
            {name: '吉林',value: 110},
        ]
    }
}
var quyuname = [
    '西北地区',
    '华南地区',
    '东北地区',
    '华东地区',
    '华北地区',
    '华中地区',
    '西南地区',
]
var sheng = ['黑龙江','辽宁','吉林']

var option = {
    title: {
        text: '测试',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
              if(typeof(params.value)[2] == "undefined"){
              	return params.name + ' : ' + params.value;
              }else{
              	return params.name + ' : ' + params.value[2];
              }
            }
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['测试']
    },
    visualMap: {
        min: 100,
        max: 500,
        left: 'left',
        top: 'bottom',
        seriesIndex: [1],
        inRange: {
            color: ['#DFFEFF', '#0571DE'],
        },
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'bottom',
        feature: {
            // dataView: {readOnly: false},
            // restore: {},
            saveAsImage: {}
        }
    },
	// dataRange: {
        // x: '-1000px',//图例横轴位置
        // y: '-1000px',//图例纵轴位置
        // orient: 'horizontal',
        // min: 0,
        // max: 1000,
        // inRange: {
            // color: ['lightskyblue','yellow', 'orangered']
        // },
        // text: ['高', '低'],           // 文本，默认为数值文本
        // splitList: [
        // {start: 1, end: 1, color: '#b8e1ff'},
        // {start: 2, end: 2, color: '#92d2ff'},
        // {start: 3, end: 3, color: '#18B3FF'},
        // {start: 4, end: 4, color: '#1ea8ed'},
        // {start: 5, end: 5, color: '#1e96ed'},
        // {start: 6, end: 6, color: '#0096ff'},
        // {start: 7, end: 7, color: '#1350eb'},

        // {start: 10, end: 10, color: '#13caeb'},
        // {start: 11, end: 11, color: '#13ebde'},
        // {start: 12, end: 12, color: '#29f18c'},

        
        // {start: 20, end: 20, color: '#f4ad27'},
        // {start: 21, end: 21, color: '#f49f27'},
        // {start: 19, end: 19, color: '#fbd9a9'},
        // 浅 5FABF8  深 4074E5  黄 EFD33D 绿7A9867
        // ],

         // 兰 0F6FC6 浅蓝 009DD9 青 0BD0D9 浅青 10CF9B 绿 7CCA62 深绿7D9631
       //  http://www.866pic.com/shejiyuansu/1e9733f162f2a1eb11036575.html
        // splitNumber: 0
    // },
    geo: {
            show: true,
            map: 'china',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            layoutCenter: ['65%', '50%'],
            layoutSize: '70%',
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#FDDD31',
                }
            },
            

        },
    series: [
    {
            name: '圆点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(geoCoordMap,data.quyu.data),
            symbolSize: function (val) {
                return val[2]/10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9'
                }
            }
        },
        {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            layoutCenter: ['60%', '50%'],
            data: data.quyu.data
            
        },
        {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: function (val) {
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = minSize4Pin - a*min;
                b = maxSize4Pin - a*max;
                return a*val[2]+b;
            },
            label: {
                normal: {
                    formatter: '{@[2]}',
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#F62157', //标志颜色
                }
            },
            zlevel: 6,
            data: convertData(geoCoordMap,data.quyu.data),
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(geoCoordMap,data.quyu.data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9',
                    shadowBlur: 10,
                    shadowColor: '#05C3F9'
                }
            },
            zlevel: 1
        },
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
        return idx * 5;
    }
};
if (option && typeof option === "object") {
    echarts.registerMap('china', china)
    myChart.setOption(option, true);
}
function switchMap(mapType, geoMap, data, vm) {
    echarts.registerMap('henan', henan)
    if(vm){
        for(var i = 0; i < quyuname.length; i++){
            if(quyuname.indexOf(vm.name) > -1){
                option.title.text = vm.name;
            }
        }
    }
    option.visualMap.min = vm ? 0 : 100;
    option.visualMap.max = vm ? vm.value : 500;
    option.geo.map = mapType;
    option.series[0].data = convertData(geoMap,data);
    option.series[1].map = mapType;
    option.series[1].data = data;
    option.series[2].data = convertData(geoMap,data);
    option.series[3].data = convertData(geoMap,data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5));
    myChart.setOption(option, true);
}

myChart.on('click', function(vm){
    switchMap('henan',geoCoordMap2, data.sheng.data, vm);
})
var back = document.getElementById('back')
back.onclick = function() {
    switchMap('china',geoCoordMap, data.quyu.data);
}
window.addEventListener("resize", function() {
    myChart.resize();
 });

 setInterval(function() {
     console.log(2)
     barOption.series[0].data = [Math.random()*50+50, Math.random()*50+50, Math.random()*50+50, Math.random()*50+50, Math.random()*50+50, Math.random()*50+50]
    barChart.setOption(barOption)
    // barChart.resize();
 },2000)
       </script>
   </body>
</html>